<template>
  <div class="chart_box">
    <div class="chart_box_title" :class="[img === 2 ? 'bg2':'']">
      <div class="title_txt">{{ title }}</div>
    </div>
    <!--<dv-border-box-8 v-if="border"  ref="border_box">-->
      <div class="content">
        <slot></slot>
      </div>
    <!--</dv-border-box-8>-->
    <!--<div class="content" v-else>-->
    <!--  <slot></slot>-->
    <!--</div>-->
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    title: {},
    img:{
      default: 1
    },
    onceKey:{

    },
    border:{
      default: true
    }
  },
  watch:{
    onceKey(){
      this.$refs.border_box.initWH()
    }
  },
  created() {
  },
  mounted() {
  },
  data() {
    return {}
  },
  methods: {}
}
</script>
<style scoped lang="scss">
.chart_box {
  width: 100%;

  .chart_box_title {
    height: 46px;
    width: 100%;
    background-image: url(@/assets/img/chart_box_title_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: relative;
    &.bg2 {
      background-image: url(@/assets/img/chart_box_title_bg_2.png);
      .title_txt{
        font-size: 18px;
        left: 57px;
      }
    }

    .title_txt {
      position: absolute;
      left: 80px;
      top: 50%;
      transform: translateY(-50%);
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #FFFFFF;
      line-height: 20px;
      text-align: left;
    }
  }

  .content {
    background-image: url(@/assets/img/chart_box_bg.png);
    background-position: center center;
    margin-top: 8px;
    background-repeat: no-repeat;
    //background-color: rgba(5, 19, 39, 1);
  }
}

</style>
